<template>
	<navigatorComp
		title="装修记录"
		bgcColor="#121512"
		fontColor="#fff"
		class="header"
	></navigatorComp>
	<view class="msg_list">
		<mescroll-uni
			:down="downOption"
			:up="upOption"
			@init="mescrollInit"
			@down="downCallback"
			@up="upCallback"
			:height="height + 'px'"
		>
			<view v-for="(item, index) in list" class="list" key="index">
				<view class="list_right2">
					<view class="title">
						<image class="l_img" :src="item.headUrl"></image>
						<view class="center">
							<view class="display_flex" style="justify-content: flex-start">
								{{ item.nickname }}
								<view class="time">{{ formatTimestamp(item.renovatDate) }}</view>
							</view>
							<view>
								将{{ belongingTo == 2 ? '墓园' : '祠堂' }}背景
								<text>{{ item.old }}</text>
								改为
								<text>{{ item.new }}</text>
							</view>
						</view>
					</view>
					<image class="r_img" :src="item.imageUrl.split(',')[0]" mode=""></image>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script setup>
import navigatorComp from '/components/navigator/index.vue';
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
import { onReady, onPageScroll, onReachBottom, onShow, onLoad } from '@dcloudio/uni-app';
import { getCurrentInstance, ref, reactive, onMounted } from 'vue';
import HomeApi from '@/API/home/index.js';
import { formatTimestamp } from '@/utils/time';
const homeApi = new HomeApi();

const props = defineProps({
	//1纪念馆2墓园3追思会4祭拜5祠堂
	belongingTo: {
		type: Number || String
	},
	id: String
});
onShow(() => {
	setTimeout(() => {
		latestId.value = 0;
		getMescroll().resetUpScroll();
	}, 1);
});
const { getMescroll, mescrollInit } = useMescroll(); // 调用mescroll的hook
//翻页信息
const downOption = ref({
	auto: false
});
const upOption = ref({
	auto: false
});
const downCallback = (mescroll) => {
	latestId.value = 0;
	getMescroll().resetUpScroll();
};
let height = ref(0);
let latestId = ref(0);
let list = ref([]);
onMounted(() => {
	height.value =
		uni.getSystemInfoSync().windowHeight -
		getApp().globalData.bottom -
		getApp().globalData.navHeight -
		uni.upx2px(88) -
		uni.upx2px(32);
});
const upCallback = async (mescroll) => {
	let res;
	console.log(props);
	if (props.belongingTo == 2) {
		//墓园
		res = await homeApi.getCemeteryRenovateRecord({
			memorialId: props.id,
			latestId: latestId.value
		});
	} else if (props.belongingTo == 5) {
		//祠堂
		res = await homeApi.getHallRenovateRecordApi({
			hallId: props.id,
			latestId: latestId.value
		});
	}
	const curPageData = res.data.items || res.data.consecrateList || []; // 当前页数据
	if (latestId.value == 0) list.value = [];
	list.value = list.value.concat(curPageData);
	if (curPageData.length) {
		latestId.value = curPageData[curPageData.length - 1].id || 0;
	}
	mescroll.endSuccess(curPageData.length); // 请求成功
};
</script>

<style lang="scss">
page {
	background-color: #121512;
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
	box-sizing: border-box;
}

.msg_list {
	overflow: auto;
	padding: 32rpx;

	.list {
		background-color: #292b2a;
		border-radius: 10rpx;
		display: flex;
		padding: 32rpx;
		margin-top: 24rpx;
		position: relative;
	}

	.list_right2 {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.l_img {
			width: 88rpx;
			height: 88rpx;
			margin-right: 24rpx;
			border-radius: 50%;
		}

		.r_img {
			width: 80rpx;
			height: 80rpx;
		}

		.title {
			font-size: 28rpx;
			color: #fff;
			margin-bottom: 16rpx;
			display: flex;

			.center {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			view {
				text {
					color: #f3e0bb;
				}
			}
		}
	}
}
.time {
	font-weight: 400;
	font-size: 12px;
	color: #999999;
	margin-left: 8rpx;
}
</style>
